<script setup>
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;
// top nav bar
const tabCurrentIndex = ref(0);
const orderList = ref([
    {
        time: '2024-04-06 11:37',
        state: 1,
        goodsList: [
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽松',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/2120460599/O1CN01LBPS4C1GINkwsOTXS_!!2120460599.jpg_430x430q90.jpg'
            },
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽松2',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/i2/1069876356/TB2ocTQG4WYBuNjy1zkXXXGGpXa_!!1069876356.jpg_430x430q90.jpg'
            },
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽3',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/2120460599/O1CN01YsmgwZ1GINkv38rkn_!!2120460599.jpg_430x430q90.jpg'
            }
        ]
    },
    {
        time: '2019-04-06 11:37',
        state: 1,
        goodsList: [
            {
                title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
                price: 69,
                image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
                number: 1,
                attr: '白色-高帮 39'
            }
        ]
    },
    {
        time: '2019-04-06 11:37',
        state: 1,
        goodsList: [
            {
                title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
                price: 69,
                image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
                number: 1,
                attr: '白色-高帮 39'
            }
        ]
    },
    {
        time: '2019-04-06 11:37',
        state: 1,
        goodsList: [
            {
                title: '回力女鞋高帮帆布鞋女学生韩版鞋子女2019潮鞋女鞋新款春季板鞋女',
                price: 69,
                image: 'https://img.alicdn.com/imgextra/i3/2128794607/TB2gzzoc41YBuNjy1zcXXbNcXXa_!!2128794607.jpg_430x430q90.jpg',
                number: 1,
                attr: '白色-高帮 39'
            }
        ]
    },
    {
        time: '2024-04-06 11:37',
        state: 1,
        goodsList: [
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽松',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i2/2120460599/O1CN01LBPS4C1GINkwsOTXS_!!2120460599.jpg_430x430q90.jpg'
            },
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽松2',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/i2/1069876356/TB2ocTQG4WYBuNjy1zkXXXGGpXa_!!1069876356.jpg_430x430q90.jpg'
            },
            {
                title: '古黛妃 短袖t恤女 春夏装2024新款韩版宽3',
                price: 179.5,
                number: 1,
                attr: '珊瑚粉 M',
                image: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i4/2120460599/O1CN01YsmgwZ1GINkv38rkn_!!2120460599.jpg_430x430q90.jpg'
            }
        ]
    }
]);
const navList = ref([
    {
        state: 0,
        text: '全部11',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 1,
        text: '待付款22',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 2,
        text: '待收货',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 3,
        text: '待评价',
        loadingType: 'more',
        orderList: []
    },
    {
        state: 4,
        text: '售后',
        loadingType: 'more',
        orderList: []
    }
]);

// 生命周期方法
onLoad((event) => {
    loadData();
});

//顶部tab点击
const tabClick = (index) => {
    tabCurrentIndex.value = index;
};

//
const changeTab = () => {};

//加载订单数据
const loadData = async () => {
    let orders = await gProperties.$api.json('orderList');
    console.log(orders);
};

//订单状态文字和颜色
const orderStateExp = (state) => {
    let stateTip = '',
        stateTipColor = '#fa436a';
    switch (+state) {
        case 1:
            stateTip = '待付款';
            break;
        case 2:
            stateTip = '待发货';
            break;
        case 9:
            stateTip = '订单已关闭';
            stateTipColor = '#909399';
            break;

        //更多自定义
    }
    return { stateTip, stateTipColor };
};

const handleTopTabsEvent = (index) => {
    console.log(index);
};
</script>
<template>
    <view class="container">
        <!-- 顶部导航 -->
        <view style="width: 750rpx">
            <TopTabs :tabData="navList" @activeIndex="handleTopTabsEvent"></TopTabs>
        </view>

        <!-- 订单列表 -->
        <scroll-view class="order-list" scroll-y>
            <view class="order-item" v-for="(order, orderIndex) in orderList" :key="orderIndex">
                <empty v-if="order.goodsList.length === 0"></empty>
                <view class="i-top">
                    <text class="time">{{ order.time }}</text>
                    <text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}待付款</text>
                    <!-- <text v-if="order.state === 9" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(orderIndex)"></text> -->
                    <text class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(orderIndex)"></text>
                </view>
                <!-- 一个订单的商品列表 -->
                <view class="goods-list" v-for="(goodsItem, goodIndex) in order.goodsList" :key="goodIndex">
                    <view class="goods-item">
                        <image class="goods-img" :src="goodsItem.image" mode="aspectFill"></image>
                        <view class="right">
                            <text class="title">{{ goodsItem.title }}</text>
                            <text class="attr-box">{{ goodsItem.attr }} x {{ goodsItem.number }}</text>
                            <text class="price">{{ goodsItem.price }}</text>
                        </view>
                    </view>
                </view>
                <view class="price-box">共7件商品 实付款143.7</view>
                <view class="divider"></view>
                <view class="action-box">
                    <button class="action-btn" plain @click="cancelOrder(item)">取消订单</button>
                    <button class="action-btn" type="warn">立即支付</button>
                </view>
            </view>
            <!-- 加载更多  more 、loading、noMore-->
            <uni-load-more :status="more"></uni-load-more>
        </scroll-view>
        <!-- <uni-load-more :status="tabItem.loadingType"></uni-load-more> -->
    </view>
</template>

<style lang="scss" scoped>
page,
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: $page-color-base;
}

.order-list {
    // flex: 1;
    // margin-top: 80rpx;
    // background-color: yellow;
    height: calc(100% - 40px);
}
.divider {
    // width: 730rpx;
    height: 1rpx; /* 分割线的高度 */
    background-color: $uni-bg-color-grey; /* 分割线的颜色 */
    // margin: 10px 0 10rpx 10rpx; /* 分割线的上下外边距 */
}
.order-item {
    width: 720rpx;
    background-color: $uni-bg-color;
    border-radius: 10rpx;
    margin: 10rpx;
    padding-left: 10rpx;
    .i-top {
        display: flex;
        align-items: center;
        height: 60rpx;
        padding-right: 30rpx;
        font-size: $list-font-lg;
        color: $font-color-dark;
        // position: relative;
        .time {
            flex: 1;
        }
        .state {
            color: $base-color;
        }
        .del-btn {
            padding: 10rpx 0 10rpx 36rpx;
            font-size: $list-font-lg;
            color: $font-color-light;
            position: relative;
            &:after {
                content: '';
                width: 0;
                height: 30rpx;
                border-left: 1px solid $border-color-dark;
                position: absolute;
                left: 20rpx;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }
}
.goods-list {
    // background-color: greenyellow;
}
.goods-item {
    display: flex;
    flex-direction: row;
    margin: 0 0 10rpx;
    .goods-img {
        width: 120rpx;
        height: 120rpx;
    }
    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 30rpx 0 24rpx;
        overflow: hidden;
        .title {
            font-size: $list-font-base + 2rpx;
            color: $font-color-dark;
            line-height: 1;
        }
        .attr-box {
            font-size: $list-font-sm + 2rpx;
            color: $font-color-light;
            padding: 10rpx 12rpx;
        }
        .price {
            font-size: $list-font-base + 2rpx;
            color: $font-color-dark;
            &:before {
                content: '￥';
                font-size: $font-sm;
                margin: 0 2rpx 0 8rpx;
            }
        }
    }
}
.price-box {
    display: flex;
    justify-content: flex-end;
    padding-right: 30rpx;
}
.action-box {
    display: flex;
    // background-color: yellow;
    flex-direction: row;
    justify-content: flex-end;
    .action-btn {
        display: flex;
        width: 160rpx;
        border-radius: 30rpx;
        justify-content: center;
        border: 1rpx solid;
        // padding: 10rpx;
        width: 160rpx;
        margin: 10rpx;
        font-size: $list-font-lg;
    }
}
</style>
